#{extends 'organization.html' /} 
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="@{'/public/javascripts/membersPopup.js'}"></script>
        <link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/viewOrgMembers.css'}" />
        <link rel="stylesheet" type="text/css" href="/public/stylesheets/Tabs.css" />
        <script type="text/javascript">
                        function loadXMLDoc(name,developerID,organizationID) {
                                
                                var answer = confirm("Are you sure you want to remove " + name +" from the organization?");
                                
                                if (answer) {
                                        $.ajax({
                                                type: "GET",
                                                url: "/Organizations/removeIdeaDeveloperFromOrganizationAsLead",
                                                data: "ideaDeveloperID="+developerID+"&organizationID="+organizationID,
                                                success: function(html){
                                                $("#viewIdeaDevs").replaceWith(html);
                                                }
                                        });
                }
                        }

                        function search(organizationID) {
                                var query = document.getElementById('searchQuery').value

                                $.ajax({
                                   type: "GET",
                                   url: "/Organizations/searchForIdeaDeveloper",
                                   data: "query="+query+"&organizationID="+organizationID,
                                   success: function(html){
                                     $("#viewIdeaDevs").replaceWith(html);
                                   }
                                 });

                        }
                        
                        function removeText() {
                                $("#searchQuery").val("");
                        }
                        
                        function doEmptySearch(organizationID) {
                                
                                //alert("I got called");
                                
                                $.ajax({
                                   type: "GET",
                                   url: "/Organizations/searchForIdeaDeveloper",
                                   data: "query="+""+"&organizationID="+organizationID,
                                   success: function(html){
                                     $("#viewIdeaDevs").replaceWith(html);
                                   }
                                 });
                        }
                        
        </script>

        
        <STYLE TYPE='text/css'>
        .scrolledIdeaDevs {
                height: 400px;width: 400;overflow: auto;border: solid gray 1px;padding:
                0.2em 0.2em;align: center;
        }
        
        .rePostition {
                position: relative; 
                bottom: -5px;
                right: -50px;
        }
        </STYLE>
<div class="viewContent">

<ul class="tabs">
                <li><a href="#Organization" class=standardLink>Organization</a></li>
                <li><a href="#Options" class=standardLink>Options</a></li>
</ul>

<div class="tab_container">
        <div id="Organization" class="tab_content">
        <div id="background">
        
        
        #{if view==0}
    <h2>Sorry, you are trying to view a non existing organization</h2> #{/if}
    #{else}
    #{set title:org.name /}
    #{if view==1}
    <h2>
        Sorry, you are not allowed to view the entities of this organization.<br />
        You are either not logged in or not a member of the organization
    </h2>
    #{/if}   
    #{else}
    
    <form action="@{Application.searchOrganization(org.id)}" id="searchBox" method="post">
 <div class="formEntry">
  <div class="formLabel"> 
  <label for="searchWord"></label> 
  </div> 
  <p>
  <input type="text" class="inputText" name="searchWord" id="searchWord" required="true"/>
   
   <input type="submit" value="Search" />
   </p>
  </div> 
  </form>
    
    
    
    <div class="organization">
        <h2 class="organization-name" align="center"> ${org.name}</h2>
        #{if org.privacyStatus==0}
        <h5 class="organization-type" align="center">public organization</h5>
        #{/if}
        #{if org.privacyStatus==1}
        <h5 class="organization-type" align="center">private organization</h5>
        #{/if}
        #{if org.privacyStatus==2}
        <h5 class="organization-type" align="center">secret organization</h5>
        #{/if}
        
         <br>
        <div class="organization-meta-data">
                <span class="organization-descripition" style = "font-style:italic;font-size: x-medium"> ${org.description}</span> <br> <br>
        </div>
    </div>
    
    
    <div class="entities">

        <h3>${org.entities.size() ?: 'no'} entities are available</h3>
    <br/>
        #{table org.entities, as: 'en'}
                #{column 'Entity Name'}
                <a href="@{Browse.viewEntity(en.id)}" class=standardLink>
                ${en.name}</a>  
                #{/column}
                #{column 'Description'}
                ${en.description}
                #{/column}
        #{/table} 
    </div>      

    #{if isAllowedToFollow == true}
     #{form @UserController.userFollowOrganization(org.id)}
      <pre>
           #{if flash.success}
           <script>
           alert("${flash.success}");
           </script>
           #{/if}
       <input type="submit" value = "FOLLOW"/>
       <br/>
      </pre>
     #{/form}
   #{/if}
   
   
     
    #{if isAllowedToUnfollow == true}
    #{form @UserController.userUnfollowOrganization(org.id)}
     <pre>
      #{if flash.success}
           <script>
                alert("${flash.success}");
           </script>
          #{/if}
       <input type="submit" value = "UNFOLLOW"/>
       <br />
    </pre>
   #{/form}
  #{/if}
  
  
   

        #{/else}
        #{/else}
        </div>
        </div>
     
   
    <div id="Options" class="tab_content">
    <div id="background">
        
        
        #{if view==0}
    <h2>Sorry, you are trying to view a non existing organization</h2> #{/if}
    #{else}
    #{set title:org.name /}
    #{if view==1}
    <h2>
        Sorry, you are not allowed to view the entities of this organization.<br />
        You are either not logged in or not a member of the organization
    </h2>
    #{/if}   
    #{else}
    
    <div class="organization">
        <h2 class="organization-name" align="center"> ${org.name}</h2>
        #{if org.privacyStatus==0}
        <h5 class="organization-type" align="center">public organization</h5>
        #{/if}
        #{if org.privacyStatus==1}
        <h5 class="organization-type" align="center">private organization</h5>
        #{/if}
        #{if org.privacyStatus==2}
        <h5 class="organization-type" align="center">secret organization</h5>
        #{/if}
        
         <br>
        <div class="organization-meta-data">
                <span class="organization-descripition" style = "font-style:italic;font-size: x-medium"> ${org.description}</span> <br> <br>
        </div>
    </div>
    
    
    <div class="removeButtons">
    <ul class = "omarlist">
     #{if allowLeadPrivileges}
    <li>
     <a href = "@{Application.giveOrganizerRole(org.id)}"
     class = "standardLink">
     Give Organizer Lead Privileges.
     </a>
    </li>
    #{/if}
	#{if organizationLead || isOrganizer}
    	<li>
     		<a href = "@{Application.addOrganizerToEntity(org.id)}"
     			class = "standardLink">
     			Add User As Organizer To Entity
     		</a>
    	</li>
    #{/if}
    #{if allowRemoveLeadPrivileges}
    <li>
     <a href = "@{Application.givenLeadPrivilagesList(org.id)}"
     class = "standardLink">
     Remove Lead Privileges from organizer.
     </a>
    </li>
     #{/if}
      #{if onlyLead}
        <li>
     <a href = "@{RequestController.organizationLeadResignRequest(org.id)}"
     class = "standardLink">
     Resign
     </a>
    </li>
    #{/if}
     #{if isSystemAdmin} 
    <li>
     <a href = "@{Users.chooseNewLead(org.id)}"
     class = "standardLink">
     Change Lead
     </a>
    </li>
    #{/if}
    #{if isLead == true}
    <li>
     <a href = "@{UserController.viewFilterUsersCriteria(-1,org.id)}"
     class = "standardLink">
     Invite idea developers into the organization
     </a>
    </li>
     #{/if}
     #{if organizationLead==true}
    <li>
     <a href = "@{Application.listOfOrganizers(org.id)}"
     class = "standardLink">
     Restrict the permission of an organizer in this organization
     </a>
    </li>
    #{/if}
     #{if organizationLead==true}
     <li>
    <a href = "@{Application.viewEntitiesOfOrg(org.id,0)}"
    class = "standardLink">
     Invite an organizer to add him to certain entities
    </a> 
     </li>
     #{/if}
     #{if organizationLead==true}
     <li>
     <a href = "@{Application.viewEntitiesOfOrg2(org.id,0)}"
     class = "standardLink">
     Remove an organizer from certain entities
     </a>
     </li>
     #{/if}
     #{if organizationLead==true}
     <li>
      <a href = "@{Application.block(org.id)}"
      class = "standardLink">
      Block a user
     </a>
     </li>
     #{/if} 
     #{if organizationLead==true}
     <li>
      <a href = "@{Application.unblock(org.id)}"
      class = "standardLink">
      Unblock a user
      </a>
     </li>
     #{/if}
     #{if organizationLead == true}
     <li>
     #{if allowTagsCreation != true}
     <a href = "@{Organizations.allowTagCreation(org.id)}"
     class = "standardLink">
      Allow Tag Creation By Developers
      </a>
     #{/if}
     #{if allowTagsCreation == true}
     <a href = "@{Organizations.stopTagCreation(org.id)}"
     class = "standardLink">
      Restrict Tag Creation By Developers
      </a>
      #{/if}
       </li>
     #{/if}
      </ul>
        <!-- PLEASE IF YOU ARE GOING TO ADD MORE BUTTONS IN THE OPTIONS TAG ADD THEM UNDER THIS LINE-->
       
      </div>
       
     #{if isOrganizationLead}
     #{if ideaDevelopers != null}

      

<!-- If he is an organization lead he can see all Idea Developers in the organization-->


        <div id="hideButton">
                <br/>
                <button type="button" id="popup">View Idea Developers</button> 

                <br/>
        </div>

        <form id="members" action = "javascript: search(${org.id});" method="post" >

                <div id="viewIdeaDevs">
                        <h2 id="entityName"> ${org.name} Members 
                                <a href="javascript:doEmptySearch(${org.id});fadeOut();" class="rePostition">
                                        <img src="@{'/public/images/fancy_close.png'}" width="30" height="30">
                                </a>
                        </h2>
                        <br/>
                        <input type="text" value="search" onfocus="javascript: removeText();" id="searchQuery">
                        <button type="button" onClick="javascript: doEmptySearch(${org.id});" >Cancel</button> 
  
                        <br/>
                        <br/>
                        <div class="scrolledIdeaDevs">
                                #{list items:ideaDevelopers, as:'product'}
                                <a>${product.name} </a>
                                <a id="removeMember" href = "javascript:loadXMLDoc('${product.name}',${product.id},${org.id});">X</a><br/>
                                <br/>
                                #{/list}
                        </div>
                </div>
        </form>
     #{/if}
     #{/if}
   
    
    
    #{/else}
    #{/else}
    </div>
    </div>
    
     
</div>
</div>


<script type="text/javascript">
        $(document).ready(function() {

                //When page loads...
                $(".tab_content").hide(); //Hide all content
                $("ul.tabs li:first").addClass("active").show(); //Activate first tab
                $(".tab_content:first").show(); //Show first tab content

                //On Click Event
                $("ul.tabs li").click(function() {

                        $("ul.tabs li").removeClass("active"); //Remove any "active" class
                        $(this).addClass("active"); //Add "active" class to selected tab
                        $(".tab_content").hide(); //Hide all tab content

                        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                        $(activeTab).fadeIn(); //Fade in the active ID content
                        return false;
                });

        });
</script>